<template>
    <div class="e-form">
        <BillTop @cancel="onCancel"></BillTop>
        <div class="tabs warningTabs">
            <el-tabs tab-position="left" v-model="tabsName" @tab-click="onChangeTab">
                <el-tab-pane label="基本信息" name="baseInfo" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="租赁结算明细" name="zljsDetail" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="服务费用" name="serviceFy" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="退场结算明细" name="tcjsDetail" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="保证金" name="bzj" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="分包商分摊成本" name="fbsftcb" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="附件信息" name="attach" :disabled="clickTabFlag"></el-tab-pane>
                <el-tab-pane label="审核历史" name="auditHistory" :disabled="clickTabFlag"></el-tab-pane>
                <div>
                    <div id="baseInfoCon" class="con">
                        <div class="tabs-title" id="baseInfo">基本信息</div>
                        <div style="width: 100%;" class="form">
                            <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="240px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="结算编号" prop="billNo">{{ formData.billNo }}</el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="机构" prop="orgName">
                                            {{ formData.orgName }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="业务类型" prop="businessTypeKey">
                                            {{ formData.businessTypeValue }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="源单编号" prop="sourceNo">
                                            <template>
                                                <span>{{ formData.sourceNo }}</span>
                                                <span class="a" @click="viewYuanDan(formData.sourceId)" v-if="formData.sourceNo">查看</span>
                                            </template>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="结算单位" prop="settlementUnitId">
                                            {{ formData.settlementUnitName }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                       <el-form-item label="结算类型" prop="settlementType">{{setSettleType}}</el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="发票号" prop="invoiceNo">
                                           {{ formData.invoiceNo }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="录入人员" prop="entryPersonnelId">{{ formData.entryPersonnelName }}</el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="不含税金额(元)" prop="taxExcluding">{{ formData.taxExcluding }}</el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="结算日期" prop="settlementDate">
                                            {{ formData.settlementDate }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="税率%" prop="taxRate">
                                            {{ formData.taxRate }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="税价合计" prop="totalAmount">
                                            {{ formData.totalAmount }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="税额" prop="taxAmount">
                                            {{ formData.taxAmount }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="服务单位费用(含税，元)" prop="totalFreight">
                                            <span> {{ formData.totalFreight }} </span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="进场费(元)" prop="slottingFee">
                                            {{ formData.slottingFee }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="赔偿费" prop="damages">
                                            <span> {{ formData.damages }} </span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="退场" prop="isExit">
                                            <el-checkbox v-model="formData.isExit" disabled></el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="退场费" prop="exitFees">
                                            {{ formData.exitFees }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="冲预付款金额(元)" prop="offsetAdvancePayment">
                                            <el-checkbox v-model="formData.isOffsetAdvancePayment" disabled></el-checkbox>&nbsp;
                                            {{ formData.offsetAdvancePayment }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="累计结算金额" prop="cumulativeSettlementAmount">
                                            {{ formData.cumulativeSettlementAmount }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="冲个人借支" prop="isPersonalBorrowing">
                                            <el-checkbox v-model="formData.isPersonalBorrowing" disabled></el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="终期结算" prop="isFinalSettlement">
                                               <el-checkbox v-model="formData.isFinalSettlement" disabled></el-checkbox>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="冲销对象" prop="reversalObjectId">
                                            <div style="display: flex; width: 100%;">
                                                {{ formData.reversalObjectNo }}
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="借支人员" prop="borrowerId">
                                            <div style="display: flex; width: 100%;">
                                                {{ formData.borrowerName }}
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="冲个人借支金额(元)" prop="personalBorrowing">
                                            {{ formData.personalBorrowing }}
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="状态" prop="state">
                                            {{ getState(formData.state) }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="传输财务共享" prop="isSharing">
                                            <span> {{ !formData.isSharing ? '未传' : '已传' }} </span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="币种" prop="currencyId">
                                            {{ formData.currency }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="本位币" prop="baseCurId">
                                            <span> {{ formData.baseCurName }} </span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="结算金额(本位币)" prop="baseSettleAmount">
                                            {{ formData.baseSettleAmount }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="人民币汇率" prop="rmbRate">
                                            <span> {{ formData.rmbRate }} </span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="本位币汇率" prop="baseCurRate">
                                            {{ formData.baseCurRate }}
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item  label="红单标识" width="150">
                                        <span class="redView redIdentifier">红单</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="备注：">
                                        <el-input placeholder="" v-model="formData.remarks" class="input-with-select" type="textarea"
                                        :rows="3" maxlength='500'>
                                            <span>
                                                {{formData.remarks}}
                                            </span>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            </el-form>
                        </div>
                    </div>
                    <div id="zljsDetailCon" class="con">
                        <div class="tabs-title" id="zljsDetail">租赁结算明细</div>
                        <div class="e-table" style="background-color: #fff">
                            <div class="e-tree-table">
                                <el-table
                                    ref="tableDataTable"
                                    key="tableRef"
                                    border
                                    style="width: 100%"
                                    row-key="id"
                                    :data="tableData"
                                    :cell-class-name="cellClsNm"
                                    @cell-mouse-enter="cellMouseEnter"
                                    @cell-mouse-leave="cellMouseLeave"
                                    class="table"
                                    :max-height="$store.state.tableHeight"
                                    v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'tableDataTable' }"
                                >
                                    <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                                    <el-table-column prop="materialClassName" label="物资类别" width="200" show-overflow-tooltip>
                                        <template slot-scope="{ row }">
                                            <div style="display:flex; justify-content: flex-start; width: 100%;">
                                                {{ row.parentId === '0' ? row.materialClassName : (row.materialClassName.split('/').slice(1).join('/')) }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="materialName" label="物资名称" min-width="220"></el-table-column>
                                    <el-table-column prop="spec" align="right" label="规格" width="200"></el-table-column>
                                    <el-table-column prop="texture" align="right" label="材质" width="200"></el-table-column>
                                    <el-table-column prop="unit" align="right" label="单位" width="200"></el-table-column>
                                    <el-table-column prop="unsettledQuantity" align="right" label="未结算数量" width="200"></el-table-column>
                                    <el-table-column prop="settledQuantity" align="right" label="结算数量" width="200"></el-table-column>
                                    <el-table-column prop="timingUnit" align="right" label="计时单位" width="200"></el-table-column>
                                    <el-table-column prop="startTime" align="right" label="结算开始时间" width="200"></el-table-column>
                                    <el-table-column prop="endTime" align="right" label="结算结束时间" width="200"></el-table-column>
                                    <el-table-column prop="leasePrice" align="right" label="租赁单价(元)" width="200"></el-table-column>
                                    <el-table-column prop="leaseTime" align="right" label="租赁时间" width="200"></el-table-column>
                                    <el-table-column prop="leaseAmount" align="right" label="租赁金额(元)" width="200"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div id="serviceFyCon" class="con">
                        <div class="tabs-title" id="serviceFy">服务费用</div>
                        <div class="e-table" style="background-color: #fff">
                            <div class="e-tree-table">
                                <el-table
                                    ref="tableDataServiceShowTable"
                                    key="tableRef"
                                    border
                                    style="width: 100%"
                                    row-key="id"
                                    :data="tableDataServiceShow"
                                    :cell-class-name="cellClsNm"
                                    @cell-mouse-enter="cellMouseEnter"
                                    @cell-mouse-leave="cellMouseLeave"
                                    class="table"
                                    :max-height="$store.state.tableHeight"
                                    v-sortTable="{ 'tableData': tableDataServiceShow, '_this': this, 'ref': 'tableDataFbsftcbTable' }"
                                >
                                    <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                                    <el-table-column label="合同编号" min-width="200" prop="contractNumber" show-overflow-tooltip>
                                        <template slot-scope="{ row }">
                                            {{ row.contractNumber }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="结算单位" min-width="200" prop="settlementUnitName" show-overflow-tooltip>
                                        <template slot-scope="{ row }">
                                            {{ row.settlementUnitName }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="发票编号" width="200" prop="invoiceNo" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="清单名称" width="150" prop="contractDtlName" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="数量" width="150" prop="quantity"></el-table-column>
                                    <el-table-column label="单价(元)" width="150" prop="price"></el-table-column>
                                    <el-table-column label="金额(元)" width="150" prop="amount"></el-table-column>
                                    <el-table-column label="税率%" width="150" prop="taxRate"></el-table-column>
                                    <el-table-column label="税额(元)" width="150" prop="taxAmount"></el-table-column>
                                    <el-table-column label="税价合计(元)" width="150" prop="totalAmount"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div id="tcjsDetailCon" class="con">
                        <div class="tabs-title" id="tcjsDetail">退场结算明细</div>
                        <div class="e-table" style="background-color: #fff">
                            <div class="e-tree-table">
                                <el-table
                                    ref="tableDataExitTable"
                                    key="tableRef"
                                    border
                                    style="width: 100%"
                                    row-key="uuid"
                                    :data="tableDataExit"
                                    :cell-class-name="cellClsNm"
                                    @cell-mouse-enter="cellMouseEnter"
                                    @cell-mouse-leave="cellMouseLeave"
                                    class="table"
                                    :max-height="$store.state.tableHeight"
                                    v-sortTable="{ 'tableData': tableDataExit, '_this': this, 'ref': 'tableDataExitTable' }"
                                >
                                    <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                                    <el-table-column label="物资类别" width="200" prop="materialClassName" show-overflow-tooltip> </el-table-column>
                                    <el-table-column label="物资名称" width="200" prop="materialName" show-overflow-tooltip> </el-table-column>
                                    <el-table-column label="规格" width="150" prop="spec"></el-table-column>
                                    <el-table-column label="材质" width="150" prop="texture"></el-table-column>
                                    <el-table-column label="单位" width="150" prop="unit"></el-table-column>
                                    <el-table-column label="入库数量" width="150" prop="receiptQuantity"></el-table-column>
                                    <el-table-column label="本次退场数量" width="150" prop="exitsQuantity"></el-table-column>
                                    <el-table-column label="截止上期末退场数量" width="200" prop="exitsQuantitySqm"></el-table-column>
                                    <el-table-column label="截止本期末退场数量" width="200" prop="exitsQuantityBqm"></el-table-column>
                                    <el-table-column label="退场时间" width="150" prop="exitsTime"></el-table-column>
                                    <el-table-column label="损耗原因" width="150" prop="reason"></el-table-column>
                                    <el-table-column label="赔偿数量" width="150" prop="compensateQuantity"></el-table-column>
                                    <el-table-column label="赔偿费(元)" width="150" prop="damages"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div id="bzjCon" class="con">
                        <div class="tabs-title" id="bzj">保证金</div>
                        <div class="e-table">
                            <div class="mainTitle"><i class="el-icon-d-arrow-right"></i>暂扣保证金</div>
                            <div class="e-tree-table">
                                <el-table
                                    ref="tableDataBzjShow1Table"
                                    key="tableRef"
                                    border
                                    style="width: 100%"
                                    row-key="id"
                                    :data="tableDataBzjShow1"
                                    :cell-class-name="cellClsNm"
                                    @cell-mouse-enter="cellMouseEnter"
                                    @cell-mouse-leave="cellMouseLeave"
                                    class="table"
                                    :max-height="$store.state.tableHeight"
                                    v-sortTable="{ 'tableData': tableDataBzjShow1, '_this': this, 'ref': 'tableDataBzjShow1Table' }"
                                >
                                    <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                                    <el-table-column label="名称" min-width="200" prop="returnDepositName" show-overflow-tooltip> </el-table-column>
                                    <el-table-column label="暂扣保证金(元)" width="200" prop="amount"></el-table-column>
                                    <el-table-column label="截止上期末暂扣保证金(元)" width="250" prop="amountBqm" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="截止本期末暂扣还保证金(元)" width="250" prop="amountSqm"></el-table-column>
                                    <el-table-column label="说明" min-width="150" prop="remarks"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="e-table">
                            <div class="mainTitle"><i class="el-icon-d-arrow-right"></i>返还保证金</div>
                            <div class="e-tree-table">
                                <el-table
                                    ref="tableDataBzjShow2Table"
                                    key="tableRef"
                                    border
                                    style="width: 100%"
                                    row-key="dtlId"
                                    :data="tableDataBzjShow2"
                                    :cell-class-name="cellClsNm"
                                    @cell-mouse-enter="cellMouseEnter"
                                    @cell-mouse-leave="cellMouseLeave"
                                    class="table"
                                    :max-height="$store.state.tableHeight"
                                    v-sortTable="{ 'tableData': tableDataBzjShow2, '_this': this, 'ref': 'tableDataBzjShow2Table' }"
                                >
                                    <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                                    <el-table-column label="名称" min-width="200" prop="returnDepositName" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="截止上期末未返还保证金(元)" width="250" prop="amountBqm" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="返还保证金(元)" width="200" prop="amount"></el-table-column>
                                    <el-table-column label="截止本期末未返还保证金(元)" width="250" prop="amountSqm"></el-table-column>
                                    <el-table-column label="说明" min-width="150" prop="remarks"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div id="fbsftcbCon" class="con">
                        <div class="tabs-title" id="fbsftcb">分包商分摊成本</div>
                        <div class="e-table" style="background-color: #fff">
                            <div class="e-tree-table">
                                <el-table
                                    border
                                    style="width: 100%"
                                    row-key="id"
                                    ref="tableDataFbsftcbTable"
                                    :data="tableDataFbsftcb"
                                    :cell-class-name="cellClsNm"
                                    @cell-mouse-enter="cellMouseEnter"
                                    @cell-mouse-leave="cellMouseLeave"
                                    class="table"
                                    :max-height="$store.state.tableHeight"
                                    v-sortTable="{ 'tableData': tableDataFbsftcb, '_this': this, 'ref': 'tableDataFbsftcbTable' }"
                                >
                                    <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                                    <el-table-column prop="subcontractorName" label="分包商名称" width="150"></el-table-column>
                                    <el-table-column prop="subcontractName" label="合同名称" min-width="220"></el-table-column>
                                    <el-table-column prop="subcontractNumber" align="right" label="合同编号" width="200"></el-table-column>
                                    <el-table-column prop="planAmount" align="right" label="设计金额" width="200"></el-table-column>
                                    <el-table-column prop="apportionmentRatio" align="right" label="分摊比例%" width="200"></el-table-column>
                                    <el-table-column prop="apportionmentAmount" align="right" label="分摊金额(元)" width="200"></el-table-column>
                                    <el-table-column prop="providType" align="right" label="甲供类型" width="200">
                                        <template slot-scope="{ row }">
                                            <!-- contractType 合同类型 1 分包合同 2 加工合同 3 物资销售合同 -->
                                            <!-- 1、当选择分包合同和加工合同时，甲供类型下拉单选：工程消耗，安全环保支出，研发支出 -->
                                            <!-- 2、当选择的合同是销售合同时：为销售消耗，不可修改。 -->
                                            <span v-if="row.contractType !== 3">{{ getProvidType(row.providType) }}</span>
                                            {{ row.contractType === 3 ? '销售消耗' : '' }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="consumeType" align="right" label="消耗类型" width="200">
                                        <template slot-scope="{ row }">
                                            <!-- 分包合同：系统计算匹配：甲供、超甲供扣款，非甲供扣款。加工合同：可为空。 -->
                                            <!-- 2、当选择的合同是销售合同时：为销售消耗，不可修改。 -->
                                            <span v-if="row.contractType !== 3">{{ getConsumeType(row.consumeType) }}</span>
                                            {{ row.contractType === 3 ? '销售消耗' : '' }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div id="attachCon" class="con">
                        <div class="tabs-title" id="attach">附件信息</div>
                        <attach-comp :relationId="billId" bucketName="turnoverLeaseDisburse" isView />
                    </div>
                    <div id="auditHistoryCon" class="con">
                        <div class="tabs-title" id="auditHistory">审核历史</div>
                        <ComExaHistory :billType="Number(billType)" @getAuditHistory="getAuditHistory" :tableData="auditHistoryData" ref="ComExaHistory" />
                    </div>
                </div>
            </el-tabs>
        </div>
        <div id="seat" :style="{ height: seatHeight + 'px' }"></div>
        <div class="buttons">
            <el-button
                    type="primary"
                    class="btn-blue"
                    size="small"
                    v-debounce
                    v-if="isPrint.includes(getState(formData.state))"
                    >打印</el-button
            >
            <!-- isSystemGeneration 是否系统生成(1:是 0:否) -->
            <ComExaButtons :auditState="auditState" @exas="exas" :canDelete="formData.isSystemGeneration !== 1" :founderId="formData.founderId" :state="formData.state" :multiple ="formData.state == 1||formData.state == 2" :commandList="commandList"/>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { openAppClient, selectDataClient, throttle, formatDate, getUuid, treeToList, webprintReport, numToChinese } from '@/utils/common'
// eslint-disable-next-line no-unused-vars
import { delLeaseDisburseBase, getLeaseDisburseBase, getLeaseDisburseDetailLs, getLeaseDisburseServiceLs, getLeaseDisburseZltcLs, getLeaseDisburseBzjLs, getLeaseDisburseFtcbLs, modifyLeaseDisburseBase, modifyLeaseDisburseDetailLs, modifyLeaseDisburseServiceLs, modifyLeaseDisburseZltcLs, modifyLeaseDisburseBzjLs, modifyLeaseDisburseFtcbLs, getAuditHistoryLs, getCurrentState, flowCommit, flowAudit, flowUndoAudit, flownullify, getInitRed
} from '@/api/settlementManagement/weeklyMaterialSettlement/leaseDisburse'
import AttachComp from '@/components/common/attachIndex'
//审核历史
import ComExaHistory from '@/components/common/exaHistory'
import ComExaButtons from '@/components/common/exaButtons'
import { mapState, mapMutations } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { uidBuilder } from '@/api/base/uid'
import '@/utils/jquery.scrollTo.min'

let oldRouter = {} // 上一个页面来源
export default {
    components: {
        AttachComp,
        ComExaHistory,
        ComExaButtons
    },
    data () {
        return {
            isPrint: ['共享审核', '共享驳回', '审核中', '已审核'], //显示打印的状态
            tabsName: 'baseInfo',
            billType: 6096,
            flowParams: {
                'billId': '',
                'billType': '',
                'freeNextUnitIndex': 0,
                'freeNextUser': '',
                'isPass': true,
                'isShareInAudit': true,
                'opinion': '',
                'orgId': '',
                'orgName': '',
                'userId': '',
                'workId': ''
            },
            //表单数据
            formData: {},
            orgId: '', //机构id
            orgName: '', //机构名称
            isSkip: false, //是否跳转
            auditHistoryData: [],
            auditState: {},
            rules: {
                businessTypeKey: [{ required: true, message: '请选择业务类型', trigger: ['blur', 'change'] }],
                settlementUnitId: [{ required: true, message: '请选择结算单位', trigger: ['blur', 'change'] }],
                settlementDate: [{ required: true, message: '请选择结算日期', trigger: ['blur', 'change'] }],
                slottingFee: [{ required: true, message: '请输入进场费', trigger: ['blur', 'change'] }],
                exitFees: [{ required: true, message: '请输入退场费', trigger: ['blur', 'change'] }],
                offsetAdvancePayment: [{ validator: (rule, value, callback) => {
                    console.log('offsetAdvancePayment rule: ', rule)
                    if (!this.formData.isOffsetAdvancePayment) {
                        callback()
                    } else if(value !== 0 && !value) {
                        callback(new Error('请输入冲预付款金额'))
                    } else {
                        callback()
                    }
                }, trigger: ['blur', 'change'] }],
            },
            MouseEnterId: 0,
            tableData: [], // 租赁结算明细
            mapObj: {},
            tableDataService: [], // 服务费用明细
            tableDataExit: [], // 退场结算明细
            tableDataBzj: [], // 保证金
            tableDataFbsftcb: [], // 分包商分摊成本
            errorMsg: [],
            errorMsg2: [],
            errorList: [], // 控制导航栏感叹号的显示
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false,
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            winEvent: {},
            commandList: [{ key: 1, value: '周转材料租赁结算单' }, { key: 2, value: '周转材料租赁服务费结算单' }, { key: 3, value: '周转材料租赁保证金暂扣单' }, { key: 4, value: '周转材料租赁保证金返还单' }, { key: 5, value: '周转材料租赁退场明细清单' }], //用户打印选择的数据
        }
    },
    computed: {
        ...mapState('equip', ['equipData']),
        ...mapState('contract', ['ctClassify']), // 甲供类型
        ...mapState('turnover', ['turnoverData']), // 业务类型、消耗类型
        // 填补底部空白，以使高度够滚动
        seatHeight () {
            return this.screenHeight - 85 - this.lastConHeight
        },
        billId () {
            return this.$route.query.billid
        },
        tableDataServiceShow () {
            return this.tableDataService.filter(item => item.changeType !== -1)
        },
        tableDataBzjShow1 () {
            return this.tableDataBzj.filter(item => item.changeType !== -1 && item.depositType === 1)
        },
        tableDataBzjShow2 () {
            return this.tableDataBzj.filter(item => item.changeType !== -1 && item.depositType === 2)
        },
        //当前结算类型
        setSettleType () {
            const obj = {
                1: '内部列账',
                2: '外来发票',
            }
            return obj[this.formData.settlementType]
        },
        //服务单位税价合计
        totalSettlementAmountService () {
            return this.tableDataService.reduce((a, b)=>a + (Number(b.totalAmount) || 0), 0)
        },
        //退场明细赔偿费合计
        totalSettlementAmountExit () {
            return this.tableDataExit[0] ? this.tableDataExit[0].children.reduce((a, b)=>a + (Number(b.damages) || 0), 0) : 0
        },
    },
    watch: {
        //给错误标签加上提醒
        errorList: newData=>{
            const tabs = document.querySelectorAll('.el-tabs__item')
            tabs.forEach(DOM=>{
                const { childNodes } = DOM
                if(childNodes.length > 1) {
                    DOM.removeChild(childNodes[1])
                }
            })
            newData.forEach(item=>{
                const itemDom = document.querySelector(`#tab-${item}`)
                var element = document.createElement('i')
                element.className = 'el-icon-warning-outline warning'
                itemDom.appendChild(element)
            })
        },
    },
    created () {
        this.flowParams.billId = this.$route.query.billid
        this.flowParams.billType = this.billType
    },
    mounted () {
        // 设置滚动事件
        this.registScroll()
        this.getData()
        this.auditState = this.$route.params.auditState
        if (!this.auditState) {
            this.getCurrentUnitInfo()
        }

        // 如果是新增保存后点击“继续”跳转过来的，则定位到第2个tab
        if (oldRouter.path === '/turnoverLeaseDisburseAdd') {
            this.tabsName = 'zljsDetail'
            this.$nextTick(() => {
                this.onChangeTab({ name: 'zljsDetail' })
            })
        }

        // 获取最后一个内容区域的高度，计算底部空白
        this.getLastConHeight()
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.winEvent.onScroll)
        window.removeEventListener('resize', this.winEvent.onResize)
    },
    beforeRouteEnter (to, from, next) {
        oldRouter = from
        next()
    },
    beforeRouteLeave (to, from, next) {
        oldRouter = null
        next()
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        async getData () {
            // 获取基础信息
            const formData = await getLeaseDisburseBase({ billId: this.billId })
            formData.businessTypeKey = String(formData.businessTypeKey)
            this.formData = formData
            // 获取租赁结算明细
            const tableData = await getLeaseDisburseDetailLs({ billId: this.billId })
            let stack = this._.clone(tableData)
            let item = stack.shift()
            const result = []
            // 迭代树 设置子级 parentId
            while (item) {
                // 顶级类别 处理 对应显示字段
                if ('topClassId' in item) {
                    item['billId'] = this.billId,
                    item['changeType'] = 0,
                    item['dtlId'] = '',
                    item['endTime'] = '',
                    item['leaseAmount'] = '',
                    item['leasePrice'] = '',
                    item['leaseTime'] = '',
                    item['materialClassId'] = item.topClassId,
                    item['materialClassName'] = item.topClassName,
                    item['materialId'] = '',
                    item['materialName'] = '',
                    item['settledQuantity'] = '',
                    item['sourceDtlId'] = '',
                    item['spec'] = '',
                    item['startTime'] = '',
                    item['texture'] = '',
                    item['timingUnit'] = '',
                    item['unit'] = '',
                    item['unsettledQuantity'] = '',
                    item['warehouseId'] = '',
                    item['warehouseName'] = '',
                    item['id'] = getUuid(),
                    item['parentId'] = '0',
                    item['isDetailed'] = '0'
                    result.push(item)
                }
                if (item.children && item.children.length) {
                    item.children.forEach(subItem => {
                        subItem.id = subItem.dtlId
                        subItem.parentId = item.id
                    })
                    stack = stack.concat(item.children)
                }
                item = stack.shift()
            }
            this.tableData = result
            // 获取服务费用明细
            this.tableDataService = await getLeaseDisburseServiceLs({ billId: this.billId })
            // 获取退场结算明细
            const tableDataExit = await getLeaseDisburseZltcLs({ billId: this.billId })
            if(tableDataExit.length > 0) {
                tableDataExit[0].children.forEach(item=>{
                    item.uuid = getUuid()
                })
                tableDataExit[0].uuid = getUuid()
                this.tableDataExit = tableDataExit
            }
            // 获取保证金
            const tableDataBzj = await getLeaseDisburseBzjLs({ billId: this.billId })
            tableDataBzj.forEach(item => {
                item.id = item.dtlId
            })
            this.tableDataBzj = tableDataBzj
            // 获取分包商分摊成本
            this.tableDataFbsftcb = await getLeaseDisburseFtcbLs({ billId: this.billId })
        },
        async getCurrentUnitInfo () {
            this.auditState = await getCurrentState(this.flowParams)
        },
        // 审核历史列表查询
        async getAuditHistory () {
            this.auditHistoryData = await getAuditHistoryLs(this.flowParams)
        },
        // 底部删除按钮
        onDel () {
            this.clientPop('err', this.oneDeleteErr, async () => {
                await delLeaseDisburseBase({ billId: this.billId })
                this.clientPop('suc', '操作成功', () => {
                    this.$router.replace('/turnoverLeaseDisburse')
                })
            })
        },
        async onAudit () {
            openAppClient('/exaDialog', '填写审核意见', () => {
                const auditParams = JSON.parse(localStorage.vuex).auditParams
                flowAudit({
                    'billId': this.billId,
                    'billType': this.billType,
                    'freeNextUnitIndex': 0,
                    'freeNextUser': '',
                    'isPass': auditParams.isPass,
                    'isShareInAudit': true,
                    'opinion': auditParams.opinion,
                    'orgId': '',
                    'orgName': '',
                    'userId': '',
                    'workId': ''
                }).then(() => {
                    this.clientPop('suc', '审核成功', () => {
                        this.$router.replace('/turnoverLeaseDisburse')
                    })
                })
            })
        },
        async onUndo () {
            try {
                await flowUndoAudit(this.flowParams)
                this.clientPop('suc', '撤回成功', () => {
                    this.$router.replace('/turnoverLeaseDisburse')
                })
            } catch (error) {
                alert(error.message || '请求出错')
            }
        },
        onNullify () {
            try {
                openAppClient('/nullifyDialog', '填写作废说明', async () => {
                    const auditParams = JSON.parse(localStorage.vuex).auditParams
                    await flownullify({
                        'billId': this.billId,
                        'billType': this.billType,
                        'nullifyCreated': '',
                        'nullifyCreator': '',
                        'nullifyCreatorId': '',
                        'nullifyDescription': auditParams.nullifyDescription,
                        'nullifyReason': auditParams.nullifyReason
                    })
                    this.clientPop('suc', '作废成功', () => {
                        this.$router.replace('/turnoverLeaseDisburse')
                    })
                })
            } catch (error) {
                alert(error.message || '请求出错')
            }
        },
        //取消按钮
        onCancel () {
            if (oldRouter.path === '/turnoverLeaseDisburse') {
                this.$router.back()
            } else {
                this.$router.replace('/turnoverLeaseDisburse')
            }
        },
        //保存
        onSave (commit) {
            modifyLeaseDisburseBase(this.formData)
                .then(()=>{
                    if (!commit) {
                        this.clientPop('suc', '保存成功', () => {
                        })
                        location.reload()
                    } else {
                        flowCommit(this.flowParams)
                            .then(()=>{
                                this.clientPop('suc', '保存并提交成功', () => {
                                    this.$router.replace('/turnoverLeaseDisburse')
                                })
                            })

                    }
                })
        },
        exas (str) {
            //选择打印返还的数据类型不同需要单独判断
            if(str.type === 'multiple') {
                this.printData(str.value)
            }
            switch (str) {
            case 'submit':
                this.onSave()
                break
            case 'submitCommit':
                this.onSave('commit')
                break
            case 'deleteData':
                this.onDel()
                break
            case 'audit':
                this.onAudit()
                break
            case 'undoAudit':
                this.onUndo()
                break
            case 'nullify':
                this.onNullify()
            }
        },
        //打印
        printData (value) {
            const params =  {
                'reportTitle': '', //报表名
                'orgName': '', //单据机构
                'reportQRUri': '', //报表内容URI
                'billNo': '', //单据编码
                'summaryInfoItems': [ //基本信息
                ],
                'tables': [ //表格
                ]
            }
            const reportTitle = this.commandList.find(item=>item.key == value)
            //设置表格整体
            params.reportTitle = reportTitle.value
            params.orgName = this.formData.orgName
            params.reportQRUri = window.location.href
            params.billNo = this.formData.billNo
            //获取对应结算单
            const billObj = {
                1: this.getSettlementDetails(),
                2: this.getService(),
                3: this.getBondWithhold(),
                4: this.getBondReturn(),
                5: this.getExit(),
            }
            const billData = billObj[reportTitle.key]
            params.summaryInfoItems = billData.info
            params.tables.push(billData.table)
            params.tables.push(this.setAuditHistoryData())
            webprintReport(params)
        },
        //打印-周材租赁结算单据明细
        getSettlementDetails () {
            //基本信息
            const target = []
            const data = this.formData
            //税价合计大写
            const capital = data.totalAmount >= 0 ? numToChinese(data.totalAmount) : '负' + numToChinese(Math.abs(data.totalAmount))
            const list = [
                ['出租单位', data.settlementUnitName, true],
                ['结算日期', data.settlementDate, false],
                ['附件', '张', false],
                ['发票编号', data.invoiceNo, false],
                ['结算依据', data.sourceNo, false],
                ['赔偿费(元)', data.damages, false],
                ['进场费(元)', data.slottingFee, false],
                ['退场费(元)', data.exitFees, false],
                ['可抵扣税额(元)', data.taxAmount, false],
                ['不含税金额(元)', data.taxExcluding, false],
                ['税率(%)', data.taxRate, false],
                ['累计结算金额(元)', data.cumulativeSettlementAmount, false],
                ['税价合计金额(元)', data.totalAmount, false],
                ['冲预付款金额(元)', data.offsetAdvancePayment, false],
                ['终期结算', data.isFinalSettlement ? '是' : '否', false],
                ['税价合计金额大写', capital, false],
                ['备注信息', data.remarks, true],
            ]
            list.forEach(item=>{
            //设置基本信息参数
                const infoObj = {
                    'label': '标题',
                    'value': '内容',
                    'isFullRow': true //是否占整行
                }
                infoObj.label = item[0]
                infoObj.value = item[1]
                infoObj.isFullRow = item[2]
                target.push(infoObj)
            })
            //表格数据
            const tableObj = {
                'tableTitle': '清单明细',
                'tableContent': {
                    '物资类别': 'materialClassName',
                    '物资名称': 'materialName',
                    '规格': 'spec',
                    '材质': 'texture',
                    '单位': 'unit',
                    '结算开始时间': 'startTime',
                    '结算结束时间': 'endTime',
                    '计时单位': 'timingUnit',
                    '数量': 'settledQuantity',
                    '租赁单价': 'leasePrice',
                    '租赁时间': 'leaseTime',
                    '租赁金额': 'leaseAmount',
                },
                'tableData': this.tableData[0] ? this.tableData[0].children : [], //表格数据
            }
            return { info: target, table: tableObj }

        },
        //打印-周材租赁结算服务费
        getService () {
            //基本信息
            const target = []
            const data = this.formData
            //创建服务单位
            const serviceCompany = []
            //创建合同编号
            const contractNumber = []
            //创建发票编号
            const invoiceNo = []
            //创建本期结算合计
            let currentTotalAmount = 0
            //创建税率
            const taxRate = []
            //创建税额合计
            let taxAmount = 0
            this.tableDataService.forEach(item=>{
                serviceCompany.push(item.settlementUnitName)
                if(item.contractNumber && item.contractNumber.length > 0) {
                    contractNumber.push(item.contractNumber)
                }
                invoiceNo.push(item.invoiceNo)
                taxRate.push(item.taxRate)
                currentTotalAmount += Number(item.amount)
                taxAmount += Number(item.taxAmount)
            })
            currentTotalAmount = currentTotalAmount.toFixed(2) * 1
            taxAmount = taxAmount.toFixed(2) * 1
            //税价合计大写
            const capital = this.totalSettlementAmountService >= 0 ? numToChinese(this.totalSettlementAmountService) : '负' + numToChinese(Math.abs(this.totalSettlementAmountService))
            const list = [
                ['服务单位', serviceCompany.join('、'), true],
                ['结算日期', data.settlementDate, false],
                ['附件', '张', false],
                ['发票编号', invoiceNo.join('、'), true],
                ['结算依据', contractNumber.join('、'), true],
                ['可抵扣税额(元)', taxAmount, false],
                ['不含税金额(元)', currentTotalAmount, false],
                ['税率(%)', taxRate.join('、'), true],
                ['税价合计金额(元)', this.totalSettlementAmountService, false],
                ['税价合计金额大写', capital, true],
                ['备注信息', data.remarks, true],
            ]
            list.forEach(item=>{
            //设置基本信息参数
                const infoObj = {
                    'label': '标题',
                    'value': '内容',
                    'isFullRow': true //是否占整行
                }
                infoObj.label = item[0]
                infoObj.value = item[1]
                infoObj.isFullRow = item[2]
                target.push(infoObj)
            })
            //表格数据
            const tableObj = {
                'tableTitle': '服务费用明细',
                'tableContent': {
                    '清单名称': 'contractDtlName',
                    '单位': 'settlementUnitName',
                    '结算数量': 'quantity',
                    '单价(元)': 'price',
                    '金额(元)': 'amount',
                    '税率(%)': 'taxRate',
                    '税额(元)': 'taxAmount',
                    '税额合计': 'totalAmount',
                },
                'tableData': this.tableDataService, //表格数据
            }
            return { info: target, table: tableObj }
        },
        //打印-周材租赁结算保证金暂扣单
        getBondWithhold () {
            //基本信息
            const target = []
            const data = this.formData
            const list = [
                ['出租单位', data.settlementUnitName, true],
                ['附件', '张', false],
                ['结算依据', data.sourceNo, false],
                ['发票编号', data.invoiceNo, false],
                ['结算日期', data.settlementDate, false],
            ]
            list.forEach(item=>{
            //设置基本信息参数
                const infoObj = {
                    'label': '标题',
                    'value': '内容',
                    'isFullRow': true //是否占整行
                }
                infoObj.label = item[0]
                infoObj.value = item[1]
                infoObj.isFullRow = item[2]
                target.push(infoObj)
            })
            //表格数据
            const tableObj = {
                'tableTitle': '保证金暂扣明细',
                'tableContent': {
                    '名称': 'returnDepositName',
                    '暂扣保证金(元)': 'amount',
                    '截止上期末暂扣保证金(元)': 'amountBqm',
                    '截止本期末暂扣保证金(元)': 'amountSqm',
                    '说明': 'remarks',
                },
                'tableData': this.tableDataBzjShow1, //表格数据
            }
            return { info: target, table: tableObj }
        },
        //打印-周材租赁结算保证金返还单
        getBondReturn () {
            //基本信息
            const target = []
            const data = this.formData
            const list = [
                ['出租单位', data.settlementUnitName, true],
                ['附件', '张', false],
                ['结算依据', data.sourceNo, false],
                ['发票编号', data.invoiceNo, false],
                ['结算日期', data.settlementDate, false],
            ]
            list.forEach(item=>{
            //设置基本信息参数
                const infoObj = {
                    'label': '标题',
                    'value': '内容',
                    'isFullRow': true //是否占整行
                }
                infoObj.label = item[0]
                infoObj.value = item[1]
                infoObj.isFullRow = item[2]
                target.push(infoObj)
            })
            //表格数据
            const tableObj = {
                'tableTitle': '保证金返还明细',
                'tableContent': {
                    '名称': 'returnDepositName',
                    '暂扣保证金(元)': 'amount',
                    '截止上期末返还保证金(元)': 'amountBqm',
                    '截止本期末返还保证金(元)': 'amountSqm',
                    '说明': 'remarks',
                },
                'tableData': this.tableDataBzjShow2, //表格数据
            }
            return { info: target, table: tableObj }
        },
        //打印-周材租赁结算退场明细
        getExit () {
            //基本信息
            const target = []
            const data = this.formData
            const list = [
                ['结算日期', data.settlementDate, false],
                ['赔偿费合计', this.totalSettlementAmountExit, false],
            ]
            list.forEach(item=>{
            //设置基本信息参数
                const infoObj = {
                    'label': '标题',
                    'value': '内容',
                    'isFullRow': true //是否占整行
                }
                infoObj.label = item[0]
                infoObj.value = item[1]
                infoObj.isFullRow = item[2]
                target.push(infoObj)
            })
            //表格数据
            const tableObj = {
                'tableTitle': '退场明细清单',
                'tableContent': {
                    '物资类别': 'materialClassName',
                    '物资名称': 'materialName',
                    '规格': 'spec',
                    '材质': 'texture',
                    '单位': 'unit',
                    '入库数量': 'receiptQuantity',
                    '本次退场数量': 'exitsQuantity',
                    '截止上期末退场数量': 'exitsQuantitySqm',
                    '截止本期末退场数量': 'exitsQuantityBqm',
                    '退场时间': 'exitsTime',
                    '损耗原因': 'reason',
                    '赔偿费': 'damages',
                },
                'tableData': this.tableDataExit[0] ? this.tableDataExit[0].children : [], //表格数据
            }
            return { info: target, table: tableObj }
        },
        //打印-添加审核历史
        setAuditHistoryData () {
            const obj = {
                'tableTitle': '审核历史',
                'tableContent': {
                    '审核级次': 'unitName',
                    '审核人': 'assignUser',
                    '审核人岗位': 'userTitle',
                    '审核时间': 'completeTime',
                    '审核意见': 'opinion',
                },
                'tableData': this.auditHistoryData, //表格数据
            }
            return obj
        },
        getState (state) {
            const findObj = this.equipData.state.find(item => item.value === Number(state))
            return findObj ? findObj.label : ''
        },
        // 获取甲供类型
        getProvidType (type) {
            const findObj = this.ctClassify.supplyTypeList.find(item => item.value === Number(type))
            return findObj ? findObj.label : ''
        },
        // 获取消耗类型
        getConsumeType (type) {
            const findObj = this.turnoverData.consumeTypeArr.find(item => item.id === Number(type))
            return findObj ? findObj.name : ''
        },
        // 查看源单
        viewYuanDan (sourceId) {
            const target = this.formData.businessTypeKey ? String(this.formData.businessTypeKey) : ''
            switch (target) {
            case '3': // 周材租赁合同
                openAppClient(`/ctRevolvMaterialApplyShow?billid=${sourceId}&isview=true`, '查看周材租赁合同')
                break
            case '5': // 临时需用计划（租赁）
                openAppClient(`/momentNeedPlanShow?billid=${sourceId}&isview=true`, '查看临时需用计划')
                break
            case '4': // 周材内租调动
                openAppClient(`/revolveInternalLeaseTransferShow?billid=${sourceId}&isview=true`, '查看周材内租调动')
                break
            }
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.dtlId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        // 获取最后一个内容区域的高度，计算底部空白
        getLastConHeight () {
            let si = setInterval(() => {
                // 因为dom异步加载，通过轮询找到渲染后的dom，获取高度
                const lastCon = document.getElementById('auditHistoryCon')
                if (lastCon) {
                    const lastConHeight = lastCon.offsetHeight
                    this.lastConHeight = lastConHeight
                    clearInterval(si)
                    si = null
                }
            }, 100)
        },
        registScroll () {
            window.removeEventListener('scroll', this.winEvent.onScroll)
            window.removeEventListener('resize', this.winEvent.onResize)

            // 保存所有tabName
            let arr = ['baseInfo', 'zljsDetail', 'serviceFy', 'tcjsDetail', 'bzj', 'fbsftcb', 'attach', 'auditHistory']
            let $idsTop = []
            const onScroll = () => {
                // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
                if (this.clickTabFlag) {
                    return
                }
                if (!$idsTop[$idsTop.length - 1]) {
                    $idsTop = arr.map(item => {
                        const $item = document.getElementById(item)
                        let itemTop = null
                        if ($item) {
                            itemTop = $item.offsetTop
                        }
                        return itemTop
                    })
                }
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                // 倒序查找
                let curLocal = 0
                for (let len = $idsTop.length, i = len - 1; i >= 0; i--) {
                    let item = $idsTop[i]
                    if (scrollTop + 1 >= item) {
                        curLocal = i
                        break
                    }
                }
                // 设置对应tabName
                this.tabsName = arr[curLocal]
            }
            this.winEvent.onScroll = throttle(onScroll, 100)
            window.addEventListener('scroll', this.winEvent.onScroll)
            this.screenWidth = document.documentElement.clientWidth - this.topHeight
            this.screenHeight = document.documentElement.clientHeight - this.topHeight
            const onResize = () => {
                this.screenWidth = document.documentElement.clientWidth - this.topHeight
                this.screenHeight = document.documentElement.clientHeight - this.topHeight
                $idsTop = arr.map(item => {
                    const itemTop = document.getElementById(item).offsetTop
                    return itemTop
                })
            }
            this.winEvent.onResize = throttle(onResize, 500)
            window.addEventListener('resize', this.winEvent.onResize)
        },
        onChangeTab (e) {
            const height  = $('#' + e.name).offset().top
            $.scrollTo(height - this.topHeight, 500)
            // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            this.clickTabFlag = true
            // 动画结束后，恢复状态
            setTimeout(() => {
                this.clickTabFlag = false
            }, 600)
        },
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
.e-table {
    background: #fff;
}
.el-tab-pane {
    margin-left: -10px;
}
.mainTitle {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: rgb(246, 246, 246);
    border: 1px solid rgb(236, 236, 236);
    margin: auto;
    margin-bottom: 15px;
    padding-left: 10px;
}
::v-deep.el-table__row{
    .cell{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.redView {
    width: 100%;
    height: 24px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.redIdentifier {
    background-color: #FF2330;
}
</style>
